<template>
  <div class="form-base-config">
    <je-panel>
      <template #tbar>
        <div class="header-button">
          <je-button type="text" @click="operateButton('save')"
            ><i class="fal fa-save"></i>保存</je-button
          >
          <je-button type="text" @click="operateButton('js')"
            ><i
              class="fas fa-bolt"
              :style="`color:${
                changeJsListener(funcStore.funcBean.FUNCINFO_FORMJSLISTENER) ? '#F4CE4A' : '#8d98ab'
              }`"
            ></i
            >表单JS事件</je-button
          >
          <je-button type="text" @click="operateButton('alignment')"
            ><i class="fal fa-align-justify"></i>标签位置整体设置</je-button
          >
          <!-- <je-button type="text"><i class="fal fa-ballot"></i>查看启用配置?</je-button> -->
        </div>
      </template>
      <template #default>
        <div class="list-container">
          <je-panel>
            <template #tbar>
              <div class="title"
                ><i class="jeicon jeicon-configure" style="margin-right: 6px"></i>核心配置</div
              >
            </template>
            <template #default>
              <je-form
                :model="formState"
                class="list-form-container"
                label-align="right"
                :colon="false"
                size="large"
                autocomplete="off"
                style="padding-bottom: 10px"
              >
                <je-row type="flex" justify="start">
                  <je-col
                    v-for="(item, index) in FormData"
                    :key="index"
                    :span="item.layout == 'flex' ? '11' : '22'"
                  >
                    <je-form-item
                      :key="item.value"
                      :name="item.value"
                      v-bind="item.require ? validateInfos[item.value] : ''"
                      validate-type="tooltip"
                    >
                      <template #label>
                        <i
                          v-if="item.unitTpl"
                          class="fas fa-question-circle"
                          style="color: #ebebeb; margin-right: 3px"
                          :style="changeColor(item.unitTipShow)"
                          @click="clickTipView(item)"
                          @mouseenter="item.unitTipShow = true"
                          @mouseleave="item.unitTipShow = false"
                        />

                        {{ item.label }}
                        <i
                          v-if="item.complete"
                          class="fas fa-flower"
                          style="color: rgb(235, 235, 235)"
                        ></i>
                      </template>
                      <je-form-item-rest>
                        <je-input
                          v-if="item.type == 'input'"
                          v-model:value="formState[item.value]"
                          :placeholder="item.defaultValue"
                          :addon-after="item.suffixafter ? item.suffixafter : ''"
                          :max-length="40"
                          allow-clear
                          @change="changeInput(item)"
                        >
                          {{ item.suffix }}
                        </je-input>
                        <je-color
                          v-if="item.type == 'color'"
                          v-model:value="formState[item.value]"
                        />
                        <je-icon v-if="item.type == 'icon'" v-model:value="formState[item.value]" />
                        <div v-if="item.type == 'switch'">
                          <je-switch v-model:value="formState[item.value]" />
                          <i class="remarks"> {{ item.remarks }}</i>
                        </div>
                        <div v-if="item.type == 'checkbox'">
                          <je-switch v-model:value="formState[item.value]" mode="checkbox" />
                          {{ item.text }}
                          <i v-if="item.remarks" class="remarks"> {{ item.remarks }}</i>
                        </div>
                        <div v-if="item.type == 'inputNumber'">
                          <je-input-number
                            v-model:value="formState[item.value]"
                            min="0"
                            style="width: 100%"
                          >
                            <template #addonAfter>
                              {{ item.suffixafter }}
                            </template>
                          </je-input-number>
                        </div>
                        <div v-if="item.type == 'radio'" style="margin-top: 4px">
                          <je-radio-group
                            v-model:value="formState[item.value]"
                            :options="item.data"
                          />
                        </div>
                        <div v-if="item.type == 'select'">
                          <je-select
                            v-if="item.configInfo"
                            v-model:value="formState[item.value]"
                            :config-info="item.configInfo"
                          ></je-select>
                          <je-select
                            v-if="!item.configInfo"
                            v-model:value="formState[item.value]"
                            :options="item.data"
                          ></je-select>
                        </div>
                      </je-form-item-rest>
                    </je-form-item>
                  </je-col>
                </je-row>
              </je-form>
            </template>
          </je-panel>
        </div>
      </template>
    </je-panel>

    <div v-if="panelConfig.alignmentShow">
      {{ formState.FUNCINFO_LABELPOSITION }}
      <component
        :is="panelConfig.showComponetns"
        :visble="panelConfig.alignmentShow"
        :location="formState.FUNCINFO_LABELPOSITION"
        @changeModal="panelConfig.alignmentShow = false"
        @refreshChildData="changeFromLocation"
      ></component>
    </div>
  </div>
</template>

<script>
  import { ref, defineComponent, reactive, onMounted } from 'vue';
  import { FORM_CONFIG } from '@/helper/constant';
  import JeAlignmentPanel from './components/alignment-panlel.vue';
  import { baseConfigSave, updateLabelPosition } from '@/api/index';
  import {
    Form,
    Modal,
    Color,
    Icon,
    Panel,
    Radio,
    InputNumber,
    Input,
    Select,
    Checkbox,
    Button,
    Switch,
    Row,
    Col,
    Tooltip,
  } from '@jecloud/ui';

  import { listenerEditorModal } from '@/helper/index.js';
  import { useFuncStore } from '@/store/func-store';
  import VueEvent from '@/helper/event';

  const useForm = Form.useForm;

  export default defineComponent({
    name: 'FormBastCongfig',
    components: {
      JeButton: Button,
      JeRow: Row,
      JeCol: Col,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeFormItemRest: Form.Item.Rest,
      JeInput: Input,
      JeSelect: Select,
      JeSwitch: Switch,
      JeCheckboxGroup: Checkbox.Group,
      JeRadioGroup: Radio.Group,
      JeAlignmentPanel,
      JeInputNumber: InputNumber,
      JeCheckbox: Checkbox,
      JeTooltip: Tooltip,
      JeColor: Color,
      JeIcon: Icon,
      JePanel: Panel,
    },
    props: {
      recordData: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    setup(props) {
      const panelConfig = reactive({
        showComponetns: '',
        alignmentShow: false,
      });
      const funcStore = useFuncStore();
      let formState = reactive(funcStore.funcBean);
      // 表单校验必填项
      const rulesRef = {
        FUNCINFO_FORMTITLE4FUNC: [
          {
            required: true,
            message: '该输入项为必填项',
          },
        ],
        FUNCINFO_FORMCOLS: [
          {
            required: true,
            message: '该输入项为必填项',
          },
        ],
      };

      const { validateInfos, validate } = useForm(formState, rulesRef, {
        onValidate: (...args) => {},
      });
      const alignmentShow = ref(false);

      const methods = {
        clickTipView(item) {
          Modal.alert({
            content: item.unitTpl,
            title: item.label,
            icon: 'fal fa-info-circle',
            status: 'info',
            width: '460',
          });
        },
        // 检测Input框值改是处理表单宽度，写个正则，只能输入数字，并且最后一位可以死数字
        changeInput(item) {
          if (item.suffixafter && item.value == 'FUNCINFO_FORMWIDTH') {
            const reg = /^[0-9]+$/gi;
            const reg1 = /^(100|[1-9]\d|\d)(.\d{1,2})?%$/gi;
            let value = formState.FUNCINFO_FORMWIDTH || 1024;
            if (value.match(reg) || value.match(reg1)) {
              console.log('验证成功');
            } else {
              formState.FUNCINFO_FORMWIDTH = '';
            }
          }
        },
        // 当改变表单标签位置的时候，保存
        changeFromLocation(val) {
          formState.FUNCINFO_LABELPOSITION = val;
          const { JE_CORE_FUNCINFO_ID } = formState;
          updateLabelPosition({
            RESOURCEFIELD_LABELALIGN: val,
            tableCode: 'JE_CORE_RESOURCEFIELD',
            RESOURCEFIELD_FUNCINFO_ID: JE_CORE_FUNCINFO_ID,
          })
            .then((res) => {
              Modal.message(res.message, 'success');
              VueEvent.emit('refreshFormFieldConfig');
            })
            .catch((err) => {
              Modal.alert(err.message, 'error');
              console.log('error', err);
            });
        },
        // 改变tip浮上去的颜色
        changeColor(flag) {
          if (flag) {
            return 'cursor:pointer;color:#3265f5';
          }
          return 'cursor:pointer;';
        },
        changeJsListener(data) {
          const parseData = data ? JSON.parse(data) : [];
          let eventType = false;
          parseData.forEach((item) => {
            if (item.fire == '1') {
              eventType = true;
            }
          });
          return eventType;
        },
        // 点击头部的按钮
        operateButton(type) {
          // 标签对齐整体设置
          if (type == 'alignment') {
            panelConfig.alignmentShow = true;
            panelConfig.showComponetns = 'JeAlignmentPanel';
            alignmentShow.value = true;
          }
          // 表单JS事件
          if (type == 'js') {
            listenerEditorModal({
              funcId: props.recordData.id,
              funcCode: props.recordData.code,
              funcName: props.recordData.text,
              eventType: 'form',
              title: '表单JS事件',
              callback: (obj) => {
                formState.FUNCINFO_FORMJSLISTENER = obj.data;
                funcStore.funcBean.FUNCINFO_FORMJSLISTENER = obj.data;
              },
            });
          }
          if (type == 'save') {
            validate()
              .then(() => {
                // 这边获取到保存的值，同时也要调取接口
                baseConfigSave(formState)
                  .then((res) => {
                    Modal.message(res.message, 'success');
                  })
                  .catch((err) => {
                    Modal.alert(err.message, 'error');
                  });
              })
              .catch((err) => {
                console.log('error', err);
              });
          }
        },
      };
      onMounted(() => {});
      return {
        formState,
        ...methods,
        panelConfig,
        FormData: ref(FORM_CONFIG),
        alignmentShow,
        validateInfos,
        rulesRef,
        funcStore,
      };
    },
  });
</script>
<style lang="less">
  .form-base-config {
    .ant-form-item-label {
      > label {
        display: inline-block !important;
        line-height: 32px;
        width: 200px !important;
      }
    }
    .ant-input-number {
      width: 100%;
    }
  }
</style>
<style lang="less" scoped>
  .form-base-config {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // position: relative;
    .header-button {
      padding-left: 10px;
      background: #f7f9fc;
      height: 40px;
      line-height: 40px;
      padding-left: 5px;
      border-bottom: 1px solid #f0f0f0;

      .button-pointer {
        cursor: pointer;
      }
    }
    .list-container {
      // position: absolute;
      // top: 40px;
      // padding: 0 40px 30px;
      // width: 100%;
      // height: 100%;
      // overflow: scroll;
      .title {
        font-size: 18px;
        color: #3265f5;
        padding: 10px 0 10px 40px;
      }
      .remarks {
        padding-left: 10px;
        color: #3265f5;
      }
    }
  }
</style>
